//
/*
	Shows how to use menus in your scene,
	and the various things one can do with them.
*/

var MenudemoAssistant = Class.create( FLibExample, {
	
	setup: function() {
		
		// Previous examples have used a wrapper called this.setupMenus() to setup the various 
		// 	menu related widgets. We'll do them long hand for you here, but the wrapper can
		//	be viewed in app-assistant
		
		/*
			There are two standard menus in a scene: the view menu at the top, and the command menu at the bottom.
			If models are set up for Mojo.Menu.viewMenu or Mojo.Menu.commandMenu, then these menus will be
			created and added to the scene:
		*/
		this.controller.setupWidget(Mojo.Menu.viewMenu, undefined, this.viewMenuModel );    
		this.controller.setupWidget(Mojo.Menu.commandMenu, undefined, this.commandMenuModel );
		
		
		/*
			The current scene also controls the "app menu", displayed by tapping the app's name in the status bar at the top of the screen.
			Specifying 'omitDefaultItems' causes the help, prefs, and edit menu items to be omitted from the menu.
		*/
		this.controller.setupWidget(Mojo.Menu.appMenu, {omitDefaultItems: true}, this.appMenuModel);
		
		
		/*
			You can also set up additional menu models for use as submenus:
			
				The ID's used to setup submenus are not real ID's but rather the commands from
				other menus. When a menu sends a command, Mojo will try to find a matching submenu before
				trying to process it with handleCommand()
		*/
		this.controller.setupWidget('edit-menu', undefined, this.editMenuModel);
		this.controller.setupWidget('file-menu', undefined, this.fileMenuModel);
		this.controller.setupWidget('category-menu', undefined, this.categoryMenuModel);
		
		
		
		/*
			These are the regular buttons in the scene body, NOT the menu buttons.
			We set them up to cycle the command menu through various sets of menu items, 
			to show how different menu features work.
		*/
		this.controller.listen('changeMenuButton', Mojo.Event.tap, this.changeItems.bind(this, 
								[this.items1Button, this.items2Button, this.items3Button, this.items4Button, 
								this.items5Button, this.items6Button, this.items7Button]));
		
		this.controller.listen('dividersButton', Mojo.Event.tap, this.changeItems.bind(this, 
								[this.dividers1, this.dividers2, this.dividers3, this.dividers4, this.dividers5, this.dividers6, this.dividers7, this.dividers8]));

		this.controller.listen('togglesButton', Mojo.Event.tap, this.changeItems.bind(this, 
								[this.toggle1, this.toggle2, this.toggle3, this.toggle4, this.toggle5, this.toggle6]));

		this.controller.listen('groupsButton', Mojo.Event.tap, this.changeItems.bind(this, 
								[this.group1, this.group2, this.group3, this.group4, this.group5]));
		
		this.controller.listen('fancyChangeButton', Mojo.Event.tap, this.changeItems.bind(this, 
								[this.labelItems, this.disabledItems, this.iconPathItems, this.submenuItems, this.shortcutItems, 
								this.flexiGroupItems, this.labelAndToggleItems, this.customItems]));

		this.controller.listen('widthsButton', Mojo.Event.tap, this.changeItems.bind(this, 
								[this.widths1, this.widths2, this.widths3, this.widths4, this.widths5]));
		
		this.controller.listen('longButton', Mojo.Event.tap, this.changeItems.bind(this, 
								[this.long1, this.long2, this.long3, this.long4]));
		
		
		
		// This button will show or hide the menubars.
		this.showHide = this.showHide.bind(this);
		this.controller.listen('showHideButton', Mojo.Event.tap, this.showHide);
		
		// Find div to use for text output:
		this.outputDisplay = this.controller.get('menudemo_outputDisplay');
		
		
	},
	
	/*
		Menu commands are now handled using the "chain of command" mechanism.
		If your scene assistant implements handleCommand, it will be called with
		the mojo-command events generated by menuitems.
		
		The chain of command is a hierarchical command handling scheme that maintains a stack of handlers
		for the current stage and another for the current scene.  Other events are also sent through the
		chain of command (mojo-back, for example).
		
		As with regular HTML events, you can use event.stopPropagation() to halt the event's propagation 
		through the chain, and event.preventDefault() to prevent any default behavior from occurring
		(and Event.stop(event) that does both).
		
	*/
	handleCommand: function(event) {
		if(event.type == Mojo.Event.command) {
			
			if(event.command == 'pyraminx') {
				this.controller.getSceneScroller().mojo.adjustBy(0, -100);
			}
			
			
			if(event.command == 'clear-input') {
				this.controller.get('customMenuInput').value="";
				Event.stop(event);
			} else if(event.command == 'print-input') {
				this.outputDisplay.innerHTML = $L('Miffie says "') + this.controller.get('customMenuInput').value+'".';
				Event.stop(event);
			}
			else {
				this.outputDisplay.innerHTML = $L("Got command event: '") +event.command+"'.";
			}
			
		}
		else if(event.type == Mojo.Event.commandEnable && event.command == Mojo.prefsMenuCmd) {
			// Enable prefs menuitem for this scene.
			// This can alternatively be done in the stage assistant, where it would then be enabled for ALL scenes.
			event.stopPropagation();
		}
	},
	
		
	
	showHide: function(event) {
		this.controller.toggleMenuVisible(Mojo.Menu.commandMenu);
		this.controller.toggleMenuVisible(Mojo.Menu.viewMenu);
	},
	
	changeItems: function(menuChoices, event) {
		
		// Change items in the menu model, and then call modelChanged to cause it to re-render.
		var i= menuChoices.indexOf(this.commandMenuModel.items);
		this.commandMenuModel.items = menuChoices[i+1] || menuChoices[0];
		this.controller.modelChanged(this.commandMenuModel);
	},
	
	
	// This is just a test function, that simulates a command event to show the app menu, until we get the button hooked up properly.
	// Apps won't generally need to do this.
	showAppMenu: function() {
		Mojo.Controller.stageController.sendEventToCommanders(Mojo.Event.make(Mojo.Event.command, {command: Mojo.showAppMenuCmd}));
	},
	
	/*
		Item arrays for demo of simple choice items
	*/
	items1Button: [{label: $L('Whoa'), command: 'whoa'}],
	items2Button: [{label: $L('Whoa'), command: 'whoa'}, {label: $L('What'), command: 'what'}],
	items3Button: [{label: $L('Whoa'), command: 'whoa'}, {label: $L('What'), command: 'what'}, {label: $L('Whiz'), command: 'whiz'}],
	items4Button: [{label: $L('Whoa'), command: 'whoa'}, {label: $L('What'), command: 'what'}, {label: $L('Whiz'), command: 'whiz'}, 
									{label: $L('Whee'), command: 'whee'}],
	items5Button: [{label: $L('Whoa'), command: 'whoa'}, {label: $L('What'), command: 'what'}, {label: $L('Whiz'), command: 'whiz'}, 
									{label: $L('Whee'), command: 'whee'}, {label: $L('w00t'), command: 'w00t'}],
	items6Button: [{label: $L('Whoa'), command: 'whoa'}, {label: $L('What'), command: 'what'}, {label: $L('Whiz'), command: 'whiz'}, 
									{label: $L('Whee'), command: 'whee'}, {label: $L('w00t'), command: 'w00t'}, {label: $L('Wend'), command: 'wend'}],
	items7Button: [{label: $L('Whoa'), command: 'whoa'}, {label: $L('What'), command: 'what'}, {label: $L('Whiz'), command: 'whiz'}, 
									{label: $L('Whee'), command: 'whee'}, {label: $L('w00t'), command: 'w00t'}, {label: $L('Wend'), command: 'wend'},
									{label: $L('Whap'), command: 'whap'}],
	
	
	/*
		Item arrays for demo of dividers / flexible spaces
	*/
	dividers1: [{}, {label: $L('Who'), command: 'who'}, {label: $L('What'), command: 'what'}, {label: $L('Why'), command: 'why'}],
	dividers2: [{label: $L('Who'), command: 'who'}, {}, {label: $L('What'), command: 'what'}, {label: $L('Why'), command: 'why'}],
	dividers3: [{label: $L('Who'), command: 'who'}, {label: $L('What'), command: 'what'}, {}, {label: $L('Why'), command: 'why'}],
	dividers4: [{label: $L('Who'), command: 'who'}, {label: $L('What'), command: 'what'}, {label: $L('Why'), command: 'why'}, {}],
	dividers5: [{}, {label: $L('Who'), command: 'who'}, {label: $L('What'), command: 'what'}, {label: $L('Why'), command: 'why'}, {}],
	dividers6: [{}, {label: $L('Who'), command: 'who'}, {}, {label: $L('What'), command: 'what'}, {label: $L('Why'), command: 'why'}, {}],
	dividers7: [{label: $L('Who'), command: 'who'}, {}, {label: $L('What'), command: 'what'}, {label: $L('Why'), command: 'why'}, {}],
	dividers8: [{label: $L('Who'), command: 'who'}, {}, {label: $L('What'), command: 'what'}, {}, {}, {label: $L('Why'), command: 'why'}],
	
	
	/*
		Item arrays for demo of toggle buttons
	*/
	toggle1:[ {label: $L('Back/Fwd'), toggleCmd:'back', items:[
									{label: $L('Foo'), command:'back', icon:'refresh'}
								]},
								{label: $L('Stuff'), toggleCmd:'toggle-stuff', items:[
									{label: $L('Stuff'), command:'toggle-stuff'}
								]}
							],
	
	toggle2:[ {label: $L('Back/Fwd'), toggleCmd:'back', items:[
									{label: $L('Back'), command:'back'}, {label: $L('Fwd'), command:'fwd'}
								]},
								{},
								{label: $L('Stuff'), toggleCmd:'search', items:[
									{label: $L('Refresh'), command:'rfsh'}, {label: $L('Srch'), command:'search'}
								]}
							],
	
	toggle3:[ {label: $L('Back/Fwd'), toggleCmd:'back', items:[
									{label: $L('Back'), command:'back'}, {label: $L('Fwd'), command:'fwd'}
								]},
								{label: $L('Stuff'), toggleCmd:'search', items:[
									{label: $L('Refresh'), command:'rfsh'}, {label: $L('Srch'), command:'search'}
								]},
								{label: $L('New Thing'), icon:'new', command:'newthing'}
							],
	
	toggle4:[ {label: $L('Back/Fwd'), toggleCmd:'back', items:[
									{label: $L('Back'), command:'back'}, {label: $L('Stay'), command:'stay'}, {label: $L('Fwd'), command:'fwd'}
								]},
								{label: $L('Stuff'), toggleCmd:'search', items:[
									{label: $L('Refresh'), command:'rfsh'}, {label: $L('Search'), command:'search'}
								]}
							],
	
	toggle5:[ {label: $L('Back/Fwd'), toggleCmd:'back', items:[
									{icon:'back', command:'back'}, {icon:'refresh', command:'stay'}, {icon:'forward', command:'fwd'}
								]},
								{label: $L('Stuff'), toggleCmd:'search', items:[
									{icon:'new', command:'rfsh'}, {icon:'search', command:'search'}
								]}
							],

	toggle6:[ {label: $L('Back/Fwd'), toggleCmd:'back', items:[
									{label: $L('Back'), command:'back'}, {label: $L('Stay'), command:'stay'}, {label: $L('Fwd'), command:'fwd'}, {label: $L('Go'), command:'go'}
								]}
							],
	
	
	// Long stuff, to test auto truncation:
	long1: [ {label: $L('This is an extraordinarily long label')}],
	long2: [ {label: $L('This is an extraordinarily long button, which I had to make even longer'), command:'verbose'}],
	long3: [ {items:[{label:'ok', command:'ok'}, {label: $L('Not sure I really want to do that'), command:'cancel'}]}],
	long4: [ {toggleCmd: 'ok', items:[{label:'ok', command:'ok'}, {label: $L('Not sure I really want to do that'), command:'cancel'}]}],
	
	/*
		Sets of menu items to demonstrate various miscelaneous stuff 
	*/
	
	// Text labels
	labelItems: [ {label: $L('Back'), command:'back'}, {}, {label: $L('A Label')}, {}, {label: $L('Fwd'), command:'fwd'}],
	
	// Menuitems that are disabled
	disabledItems: [ {label: $L('Back'), command:'back', disabled:true}, {}, {label: $L('Disabled')}, {}, {label: $L('Fwd'), command:'fwd', disabled:true}],
	
	// Icon menuitems where the icon is provided by the app and specified with a path instead of a CSS class.
	iconPathItems: [ {iconPath:'images/deadapp.png', command:"images/deadapp.png"}, {label: $L('Icons')}, 
					{iconPath:'images/miffy.png', command:"miffy.png"}],
	
	// Menuitems that trigger submenus.
	submenuItems: [ {label: $L('File'), submenu:"file-menu"}, {label: $L('Submenus')}, 
					{label: $L('Edit'), submenu:"edit-menu"}],
	
	// Menuitems with keyboard shortcuts
	shortcutItems: [ {label: $L('File'), submenu:"file-menu"}, {label: $L('Shortcuts')}, 
					{items: [{label: $L('A'), shortcut:"A", command:'cmd-a'}, {label: $L('B'), shortcut:"B", command:'cmd-b'}] }, 
					{label: $L('F'), shortcut:"f", command:'cmd-f'}],
	
	// Menuitems with dividers inside groups.  Currently displays wrong.
	flexiGroupItems: [{items:[
							{iconPath:'images/deadapp.png', command:"images/deadapp.png"}, 
							{}, 
							{label: $L('Dividers in Groups')},
							{},
							{iconPath:'images/miffy.png', command:"miffy.png"}
							]}],
	
	// A text label inside a toggle group
	// Currently does not look right, but the functionality is okay.
	labelAndToggleItems: [{toggleCmd:'lights-on', items:[
							{label: $L('Lights')},
							{label: $L('On'), command:"lights-on"}, 
							{label: $L('Off'), command:"lights-off"}
							]}],
	
	// Use of a custom HTML template item to include a text input field in the menu bar.
	customItems: [ {iconPath:'images/deadapp.png', command:"clear-input"}, {template:'menudemo/custom-item'}, 
											{iconPath:'images/miffy.png', command:"print-input"}],
	
	
	
	/*
		Sets of menu items to demonstrate specification of custom widths in items.
		This currently does not work well, except for specifying widths on dividers.
	*/
	
	// extra-wide icon buttons
	widths1: [ {iconPath:'images/deadapp.png', command:"images/deadapp.png", width:100}, {label: $L('Icons')}, 
					{iconPath:'images/miffy.png', command:"miffy.png", width:100}],
	
	// extra-wide label
	widths2: [ {iconPath:'images/deadapp.png', command:"images/deadapp.png"}, {label: $L('Wide Label'), width:150}, 
					{iconPath:'images/miffy.png', command:"miffy.png"}],
	
	// extra wide text buttons
	widths3: [ {label: $L('Foo'), command:"foo-cmd", width:100}, {}, 
					{label: $L('Bar'), command:"bar-cmd", width:100}],
	
	// extra wide icon buttons in a group
	widths4: [{items:[{label: $L('Back'), icon:'back', command:'back', width:150}, {label: $L('Forward'), icon:'forward', command:'fwd', width:150}]}],
	
	// dividers with specified widths
	widths5: [ {iconPath:'images/deadapp.png', command:"images/deadapp.png"}, {width:20}, 
					{iconPath:'images/miffy.png', command:"miffy.png"}, {width:40}, 
					{iconPath:'images/deadapp.png', command:"images/deadapp.png"}, {width:60}, 
					{iconPath:'images/miffy.png', command:"miffy.png"}
					],
	
	
	/*
		Sets of menu items to demonstrate various uses of item groups
	*/
	group1: [{items:[{label: $L('Back'), icon:'back', command:'back'}, {label: $L('Forward'), icon:'forward', command:'fwd'}]}, 
						{items:[{label: $L('Back'), command:'back'}, {label: $L('Fwd'), command:'fwd'}]}
						],
	
	group2: [{items:[
				{label: $L('Back'), icon:'back', command:'back'}, 
				{label: $L('Forward'), icon:'forward', command:'fwd'}, 
				{label: $L('Refresh'), icon:'refresh', command:'rfsh'}
				]}],
	
	group3: [{items:[
				{label: $L('Back'), icon:'back', command:'back'}, 
				{label: $L('Forward'), icon:'forward', command:'fwd'}, 
				{label: $L('Refresh'), icon:'refresh', command:'rfsh'},
				{label: $L('Search'), icon:'search', command:'search'}
				]}],
	
	group4: [{items:[
				{label: $L('Back'), icon:'back', command:'back'}, 
				{label: $L('Fwd'), command:'fwd'}, 
				{label: $L('Refr'), command:'rfsh'},
				{label: $L('Search'), icon:'search', command:'search'},
				{label: $L('Search'), iconPath:'images/pyraminx.png', command:'donut'}
				]}],

	group5: [
			{label: $L('Back/Fwd'), toggleCmd:'back', items:[
				{label: $L('Back'), icon:'back', command:'back'},
				{label: $L('Forward'), icon:'forward', command:'fwd'}
			]},

			{label: $L('Stuff'), items:[
				{label: $L('Refresh'), icon:'refresh', command:'rfsh'},
				{label: $L('Search'), icon:'search', command:'search'}
			]},

			{label: $L('New Thing'), icon:'new', command:'newthing'}
		],
	
	
	
	
	/*
		Models for various submenus:
	*/
	editMenuModel: { label: $L('Edit'), items: [{label: $L('Cut'), command:'cut'}, 
					                {label: $L('Copy'), command:'copy'}, 
					                {label: $L('Paste'), command:'paste'}, 
					                {label: $L('Clear'), command:'clear'}
								]},
	
	fileMenuModel: { label: $L('File'), items: [{label: $L('Open'), command:'open', shortcut:'O'}, 
							                {label: $L('Close'), command:'close', shortcut:'w'}, 
							                {label: $L('Save'), command:'save', shortcut:'S'}, 
							                {label: $L('Whatever'), command:'whatever', shortcut:'r'}
								]},

	categoryMenuModel: { label: $L('Category'), items: [{label: $L('All'), command:'cat-all', shortcut:'l'}, 
									                {label: $L('Business'), command:'cat-business' }, 
									                {label: $L('Personal'), command:'cat-personal', shortcut:'p'}, 
									                {label: $L('Unfiled'), command:'cat-unfiled', shortcut:'u'}
								]},
	
	
	appMenuModel: {
						label: $L('Menu Demo'), items: [
										                {label: $L('Disintegrate'), command:'disintegrate', disabled:true},
														Mojo.Menu.editItem,
										                {label: $L('Invalidate'), command:'invalidate'},
										                {label: $L('Obfuscate'), command:'obfuscate'},
										                {label: $L('Whatever'), command:'whatever'},
														Mojo.Menu.helpItem,
														Mojo.Menu.prefsItem
													],
	},
	viewMenuModel: {
				label: $L('Menu Demo'),
				items: [{label: $L('Foo'), command:'foo'}, 
						{label: $L('Donut'), iconPath:'images/pyraminx.png', command:'pyraminx'}, 
						{label: $L('Cat'), submenu:'category-menu'}
	]},
	
	commandMenuModel: {
		items: [{ iconPath: 'images/pyraminx.png', command: 'menu-share'}, 
				{ label: 'Supercalifragilisticexpialidocious', expand:true},
				{iconPath: 'images/pyraminx.png', command: 'menu-delete'}]
	}
	
});





